<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<jsp:include page="menu.jsp" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/my.css" />
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<script type = "text/javascript">
$(function() {
	$("#captcha").click(function(){
		$("#captcha").attr("src","captcha?timestamp=" +new Date().getTime());
	})
    // 账号输入框change事件（含Ajax请求）
    $("input[name='username']").on("change", function() {
        let username = $(this).val().trim();
        if (username !== "") {
            $.ajax({
                url: "checkusername", // 假设后端校验接口地址为checkUsername
                type: "POST",
                data: { username: username },
                success: function(data) {
                    $(".note1").text(data);
                },
                error: function() {
                    $(".note1").text("请求失败，请稍后重试");
                }
            });
        } else {
            $(".note1").text("用户名不能为空");
        }
    });

    // 密码校验
    $("input[name='password']").on("change", function() {
        let val = $(this).val().trim();
        if (val === "") {
            $(".note2").text("密码不能为空");
        } else {
            $(".note2").text("");
        }
    });

    // 邮箱校验
    $("input[name='email']").on("change", function() {
        let val = $(this).val().trim();
        let reg = /^[\w.-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,}$/;
        if (val === "" || !reg.test(val)) {
            $(".note3").text("邮箱格式不正确");
        } else {
            $(".note3").text("");
        }
    });

    // 表单提交校验
    $("form").on("submit", function() {
        let usernameVal = $("input[name='username']").val().trim();
        let pwdVal = $("input[name='password']").val().trim();
        let emailVal = $("input[name='email']").val().trim();
        let regEmail = /^[\w.-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,}$/;
        let isTypeChecked = $("input[name='type']:checked").length > 0;

        if (usernameVal === "") {
            $(".note1").text("用户名不能为空");
            return false;
        } 
        if (pwdVal === "") {
            $(".note2").text("密码不能为空");
            return false;
        } 
        if (emailVal === "" || !regEmail.test(emailVal)) {
            $(".note3").text("邮箱格式不正确");
            return false;
        } 
        if (!isTypeChecked) {
            alert("类型至少选择一个！");
            return false;
        }
        return true;
    });
});
</script>
</head>
<body>
	<h1 class="title">用户注册</h1>
	<form action="regist" method="post">
		<table>
			<tr>
				<td>账号</td>
				<td><input type="text" name="username"/></td>
				<td><span class ="note1"></span></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="password" name="password"/></td>
				<td><span class ="note2"></span></td>
			</tr>
			<tr>
				<td>Email</td>
				<td><input type="text" name="email" /></td>
				<td><span class ="note3"></span></td>
			</tr>
			<tr>
				<td>性别</td>
				<td colspan="2" style="text-align: left;"><input type="radio" name="sex" value="1" checked="checked"/>男 <input
					type="radio" name="sex" value="0"/>女</td>
			</tr>
			<tr>
				<td>关注类型</td>
				<td colspan="2"><input type="checkbox" name="type" value="法律规定" checked="checked"/>法律规定
					<input type="checkbox" name="type" value="管理办法" />管理办法 <input
					type="checkbox" name="type" value="决定条例" />决定条例 <input
					type="checkbox" name="type" value="细则解释" />细则解释 <input
					type="checkbox" name="type" value="规范指南" />规范指南</td>
			</tr>
			<tr>
				<td>验证码</td>
				<td><input type="text" name="captcha" /></td>
				<td><img src="captcha" id ="captcha"/></td>
			</tr>
			<tr>
				<td></td>
				<td colspan="2"><input type="submit" value="注册" />
				<td>
			</tr>
		</table>
	</form>
</body>
</html>